<template>
  <!-- <div class="todo-input">
    <input
      type="text"
      placeholder="请输入新待办事项"
      v-model.trim="inputValue"
      class="input"
      ref="inputRef"
      @keydown.enter="handleAdd"
    >
    <button @click="handleAdd">添加</button>
  </div> -->
  <div class="field is-grouped container" :style="{marginTop: '12px'}">
    <p class="control is-expanded">
      <input
        type="text"
        placeholder="请输入新待办事项"
        v-model.trim="inputValue"
        class="input"
        ref="inputRef"
        @keydown.enter="handleAdd"
      >
    </p>
    <p class="control">
      <a href="/" class="button is-primary" @click.prevent="handleAdd">
        添加
      </a>
    </p>
  </div>
</template>

<script>
export default {
  name: 'TodoInput',
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    handleAdd() {
      // 输入框自动获得焦点
      this.$refs.inputRef.focus()
      // 如果输入内容为空，不添加
      if (this.inputValue.length === 0) {
        return
      }
      // 触发父组件中定义的事件，向父组件传递数据
      this.$emit('add', this.inputValue)
      // 清空文本框
      this.inputValue = ''
    }
  }
}
</script>

<style lang="scss">

</style>
